<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*选择器抓取页面的元素给元素添加效果【添加一个样式】*/
			div{
				/*边框复合属性   生成1个像素实线橙色的边框*/
				border: 1px solid #ffaa00;
				width: 500px;
				height: 500px;
			}
			#d2{
				border: 10px solid #000;
				backgr ound-color: #000;
				border-style: dotted;
				border-style: dashed;
				border-style: double;
				/*子属性：border-color 边框颜色属性*/
				border-color: #ffaa00;
			}
			.d5{
				/*border边框属性【复合属性】  width style color*/
				border: 20px solid #f00;
				/*子属性：border-width 边框的宽度属性*/
				/*需求：第三个div 40像素*/
				border-width: 40px;
				/*需求：上边框宽度20px 点线*/
				border-top: 20px dotted #f00;
				/*需求：上边框加颜色*/
				border-top-color: #ff0;
				border-bottom-width: 1px;
				border-left-style: double;
				border-right: 5px dashed;
				border-right-color: #00ff00;
			}
			/*边框倒角：边框或者背景颜色
			画圆：宽度也倒角一致
			border-radius属性值：  1个值  代表 上 右  下 左【顺时针】
			                      2个值  代表 上 下  | 右 左
								  3个值  代表 上 |右 左  |下
								  4个值  代表 上 右 下 左
			练习：圆，4个颜色，鼠标悬停，旋转
			     第三div 添加 悬停效果-----伪类选择器  追加效果
			*/
			.d4{
				border: 8px solid #f00;
				border-radius: 50%;
				border-color:red green blue black;
				/*过渡属性*/
				transition: transform 10s;
			}
			/*第三div追加悬停效果*/
			.d4:hover{
				transform: rotate(180deg);
			}
		</style>
	</head>
	<body>
		<!--div有宽没高的空间
		   css边框的使用---选择器
		   -->
		<div></div>
		<div id="d2"></div>
		<div class="d3 d4 d5"></div>
	</body>
</html>